<template>
  <div class="h-full p-2">
    <Scrollbar>
      <div
        v-for="(item, index) in dataRef"
        :key="index"
        class="flex items-center flex-wrap gap-2 mb-2"
      >
        <div class="overflow-hidden whitespace-nowrap overflow-ellipsis w-100px">{{
          item.title
        }}</div>
        <template v-if="item.type == 'DATE'">
          <div class="flex items-center gap-2">
            <Select :options="dateTypeOptions" v-model:value="item.dateType" style="width: 120px" />
            <div v-if="item.dateType == '0'">
              从
              <DatePicker
                v-model:value="item.value1"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
              />
              至
              <DatePicker
                v-model:value="item.value2"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
              />
            </div>
            <div v-if="item.dateType == '1'">
              <Select
                :options="conditionSignOptions"
                v-model:value="item.conditionSign"
                style="width: 100px"
              />
              <DatePicker
                v-model:value="item.value1"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
              />
            </div>
          </div>
        </template>
        <template v-else-if="item.type == 'DATE_TIME'">
          <div class="flex items-center gap-2">
            <Select :options="dateTypeOptions" v-model:value="item.dateType" style="width: 120px" />
            <div v-if="item.dateType == '0'">
              从
              <DatePicker
                v-model:value="item.value1"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                :show-time="true"
              />
              至
              <DatePicker
                v-model:value="item.value2"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                :show-time="true"
              />
            </div>
            <div v-if="item.dateType == '1'">
              <Select
                :options="conditionSignOptions"
                v-model:value="item.conditionSign"
                style="width: 100px"
              />
              <DatePicker
                v-model:value="item.value1"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                :show-time="true"
              />
            </div>
          </div>
        </template>
        <template
          v-else-if="
            item.type == 'select' || (item.type == 'macro' && item.macroCode == 'macro_flow_select')
          "
        >
          <template v-if="item.values && item.values.length > 0">
            <div
              v-for="(el, eli) in item.values"
              :key="'values' + eli"
              class="flex gap-2 items-center"
            >
              <Select
                v-if="eli == 0"
                :options="item.options"
                v-model:value="el.value"
                style="width: 100px"
              />
              <div v-if="eli != 0"> 或者 </div>
              <Select
                v-if="eli != 0"
                :options="item.options"
                v-model:value="el.value"
                style="width: 100px"
              />
              <CloseOutlined
                v-if="eli != 0"
                @click="handleDeleteValues(index, eli)"
                style="color: red"
              />
            </div>
          </template>
          <a-button @click="handleAddValues(index)" v-if="item.compareType == 0">或者</a-button>
          <Select
            :options="selectOptions"
            v-model:value="item.compareType"
            style="width: 140px"
            @change="handleChangeCompareType($event, index)"
          />
        </template>
        <template v-else-if="item.type == 'macro' && item.macroCode != 'macro_flow_select'">
          <Select
            :options="item.isDept ? equalOptions : textOptions"
            v-model:value="item.conditionSign"
            style="width: 100px"
          />
          <FormCtl
            v-if="item['name'] && currentFormCode"
            :formCode="currentFormCode"
            :fieldName="item['name']"
            v-model:value="item['value']"
            style="width: 100px; margin-right: 5px"
          />

          <Select
            v-if="item.isDept"
            :options="deptOptions"
            v-model:value="item.compareType"
            style="width: 100px"
          />
        </template>
        <template v-else>
          <template v-if="item.isNumeric">
            <Select
              :options="conditionSignOptions"
              v-model:value="item.conditionSign"
              style="width: 100px"
            />
            <InputNumber v-model:value="item.value" style="width: 100px !important" />
          </template>
          <template v-else>
            <Select
              :options="textOptions"
              v-model:value="item.conditionSign"
              style="width: 100px"
            />
            <Input v-model:value="item.value" style="width: 100px" />
          </template>
        </template>
      </div>
    </Scrollbar>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Scrollbar } from '/@/components/Scrollbar';
  import { Select, Input, InputNumber, DatePicker } from 'ant-design-vue';
  import { getQueryGetConditions } from '/@/api/reportForms/reportForms';
  import {
    dateTypeOptions,
    conditionSignOptions,
    selectOptions,
    textOptions,
    deptOptions,
    equalOptions,
  } from './fieldForm.data';
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { FormCtl } from '/@/components/FormCtl';
  import { isArray } from '/@/utils/is';
  const props = defineProps({
    fieldsSelected: {
      type: String,
      default: '',
    },
    formCode: {
      type: String,
      default: '',
    },
    queryId: {
      type: String,
      default: '',
    },
  });
  const dataRef = ref<Recordable[]>([]);
  const currentFormCode = ref('');

  const fetch = async () => {
    const { fieldsSelected, formCode, queryId } = props;
    const params = {
      queryId,
      formCode,
      fieldsSelected,
    };
    if (!params.queryId) {
      return;
    }
    const data = await getQueryGetConditions(params);
    dataRef.value = data?.conditions || [];
    currentFormCode.value = data?.formCode;
    dataRef.value.forEach((item) => {
      if (
        item.type == 'select' ||
        (item.type == 'macro' && item.macroCode == 'macro_flow_select')
      ) {
        if (!isArray(item.values)) {
          item.values = [{ value: '' }];
        }
      }
    });
  };

  //删除select
  const handleDeleteValues = (index, eli) => {
    dataRef.value[index].values.splice(eli, 1);
    dataRef.value = [...dataRef.value];
  };
  //新增select
  const handleAddValues = (index) => {
    dataRef.value[index].values.push({
      value: '',
    });
    dataRef.value = [...dataRef.value];
  };
  //改变类型
  const handleChangeCompareType = (value, index) => {
    dataRef.value[index].compareType = value;
    dataRef.value = [...dataRef.value];
    if (value == 2) {
      dataRef.value[index].values = dataRef.value[index].values.filter((_, index) => index == 0);
    }
  };

  watch(
    () => props.fieldsSelected,
    () => {
      fetch();
    },
    {
      immediate: true,
    },
  );
  defineExpose({
    dataRef,
    fetch,
  });
</script>
